import React, { useState } from 'react'
import { Layout, Menu, Avatar, Dropdown, Badge, Space, Tooltip } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import {
    UserOutlined,
    CalendarOutlined,
    DollarOutlined,
    SettingOutlined,
    BellOutlined,
    LogoutOutlined,
    ScissorOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    QuestionCircleOutlined
} from '@ant-design/icons'
import AppRouter from '@/router/AppRouter'
import './styles/Header.scss'

const { Header, Sider, Content } = Layout

const MainLayout = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const [collapsed, setCollapsed] = useState(false)

    const menuItems = [
        {
            key: '/',
            icon: <UserOutlined />,
            label: '会员管理'
        },
        {
            key: '/appointments',
            icon: <CalendarOutlined />,
            label: '预约管理'
        },
        {
            key: '/transactions',
            icon: <DollarOutlined />,
            label: '交易记录'
        },
        {
            key: '/settings',
            icon: <SettingOutlined />,
            label: '系统设置'
        }
    ]

    const userMenuItems = [
        {
            key: 'profile',
            icon: <UserOutlined />,
            label: '个人信息'
        },
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: '账号设置'
        },
        {
            type: 'divider'
        },
        {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: '退出登录'
        }
    ]

    return (
        <Layout className="site-layout">
            <Header className="site-header">
                <div className="site-header-left">
                    <span className="trigger" onClick={() => setCollapsed(!collapsed)}>
                        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    </span>
                    <div className="logo">
                        <ScissorOutlined className="logo-icon" />
                        {!collapsed && <span className="logo-text">美发管理系统</span>}
                    </div>
                </div>
                <div className="site-header-right">
                    <Tooltip title="帮助文档">
                        <span className="action-item">
                            <QuestionCircleOutlined />
                        </span>
                    </Tooltip>
                    <Badge count={5} offset={[10, 0]}>
                        <span className="action-item">
                            <BellOutlined />
                        </span>
                    </Badge>
                    <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
                        <div className="user-info">
                            <Avatar icon={<UserOutlined />} className="avatar" />
                            <span className="name">管理员</span>
                        </div>
                    </Dropdown>
                </div>
            </Header>
            <Layout>
                <Sider
                    className="site-sider"
                    trigger={null}
                    collapsible
                    collapsed={collapsed}
                    width={220}
                >
                    <Menu
                        className="site-menu"
                        mode="inline"
                        selectedKeys={[location.pathname]}
                        items={menuItems}
                        onClick={({ key }) => navigate(key)}
                    />
                </Sider>
                <Content className="site-content">
                    <AppRouter />
                </Content>
            </Layout>
        </Layout>
    )
}

export default MainLayout 